<template>
    <div class="group-manage">
      <el-button v-if="isOwner" type="primary" @click="showInviteDialog">邀请好友</el-button>
      <el-button v-if="!isOwner" type="danger" @click="exitGroup">退出群聊</el-button>
      
      <!-- 邀请好友对话框 -->
      <el-dialog v-model="inviteDialogVisible" title="邀请好友" width="30%">
        <el-transfer
          v-model="selectedFriends"
          :data="friendList"
          :titles="['好友列表', '已选好友']"
          :props="{
            key: 'id',
            label: 'nickname'
          }"
        ></el-transfer>
        <template #footer>
          <el-button @click="inviteDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="inviteFriends">邀请</el-button>
        </template>
      </el-dialog>
    </div>
  </template>
  
  <script setup>
  import { ref, computed } from 'vue'
  import { useRouter } from 'vue-router'
  import { useConversationStore, useGroupingStore, useUserStore, useRoomStore } from '@/stores'
  import { exitRoomApi, inviteUsersApi } from '@/api/room'
  import { ElMessage, ElMessageBox } from 'element-plus'
  //修改者：hacja
  const router = useRouter()
  
  const props = defineProps({
    groupId: {
      type: Number,
      required: true
    },
    ownerId: {
      type: Number,
      required: true
    }
  })
  
  const conversationStore = useConversationStore()
  const groupingStore = useGroupingStore()
  const userStore = useUserStore()
  const roomStore = useRoomStore()
  
  const inviteDialogVisible = ref(false)
  const selectedFriends = ref([])
  
  const isOwner = computed(() => props.ownerId === userStore.userid)
  
  const friendList = computed(() => {
    // 从分组好友中获取所有好友
    const allFriends = []
    groupingStore.list.forEach(group => {
      group.friends.forEach(friend => {
        allFriends.push({
          id: friend.id,
          nickname: friend.nickname,
          avatar: friend.avatar
        })
      })
    })
    return allFriends
  })
  
  // 显示邀请对话框
  const showInviteDialog = () => {
    selectedFriends.value = []
    inviteDialogVisible.value = true
  }
  
  // 邀请好友
  const inviteFriends = async () => {
    if (selectedFriends.value.length === 0) {
      ElMessage.warning('请选择要邀请的好友')
      return
    }
    
    try {
      const response = await inviteUsersApi({
        room_id: props.groupId,
        user_ids: selectedFriends.value
      })
      
      if (response && response.code === 200) {
        ElMessage.success('邀请发送成功')
        inviteDialogVisible.value = false
      } else {
        ElMessage.error(response?.msg || '邀请发送失败')
      }
    } catch (error) {
      ElMessage.error('邀请发送失败')
      console.error('邀请好友失败:', error)
    }
  }
  
  // 退出群聊
  const exitGroup = () => {
    ElMessageBox.confirm('确定要退出该群聊吗?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(async () => {
      try {
        const response = await exitRoomApi(props.groupId)
        if (response && response.code === 200) {
          ElMessage.success('已退出群聊')
          // 返回会话列表
          conversationStore.setActive(null)
          router.push('/conversation')
        } else {
          ElMessage.error(response?.msg || '退出群聊失败')
        }
      } catch (error) {
        ElMessage.error('退出群聊失败')
        console.error('退出群聊失败:', error)
      }
    }).catch(() => {})
  }
  </script>
  
  <style lang="scss" scoped>
  .group-manage {
    margin-top: 20px;
    padding: 10px;
    border-top: 1px solid var(--wrap-background-color);
    
    .el-button + .el-button {
      margin-left: 10px;
    }
  }
  </style>